import React, { Component } from "react";

// 用函数组件来定义Child1组件
// 对于函数组件来说，可以通过props参数来接收
const Child1 = (props) => {
  // console.log(props);
  return <div>child1组件 - {props.count}</div>;
};

// 用类组件的方式来定义Child2组件
// 对于类组件来说，可以使用this
class Child2 extends Component {
  render() {
    // console.log(this);
    const { name } = this.props;
    return <div>child2组件 - {name}</div>;
  }
  // props的值是不能被修改
  // 只能修改父组件传进来的值，那么子组件接收到的props就会自动更新
  // 具有单向数据流的
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.props.name = "lisi";
  //   }, 2000);
  // }
}

class App extends Component {
  render() {
    // 父子组件传参和vue是一样的，也是通过自定义属性
    return (
      <>
        <h2>props</h2>
        <Child1 count="5" />
        <Child2 name="zhangsan" />
      </>
    );
  }
}

export default App;
